[FW] Flex用グラフィックアセットの作成 ～画像編

[使用アプリケーション] Fireworks

 

Flexアプリケーションを開発する際には様々なUIスキンを使用します。
Flex側からグラフィックアセットを適用する方法はこちらに詳しいので、本記事ではFlexで呼び出せる形式のグラフィックアセットの作成方法について触れたいと思います。

 

グラフィックアセットをpng画像として書きだす

最も（？）一般的な方法です。基本的にグラフィックツールは何でもよいのですが大量のpng画像の管理と書き出しに適したソフトウェアということで今回はFireworksを利用して作ってみたいと思います。

例えば、Fireworksで以下のようなファイルを作成し、緑の線で囲まれた部分をグラフィックアセットとして個別に書き出します。

※Fireworksのサンプルファイルはこちら

Fireworksでグラフィックアセットを作成する際のポイント

●「グラフィックアセット名」＝「レイヤー名」

Fireworksの「レイヤー」パネルを開き、ひとつのグラフィックアセットとして書きだしたいグラフィックパーツをひとつのレイヤーにまとめて更にレイヤーにアセット名をつけます。（レイヤー上をダブルクリックするとリネームできます）

●ピクセルのズレがないかチェック

Fireworksはビットマップデータのほかベクターデータも扱えるため、ステージ上に置いたグラフィックのx座標、y座標が整数値外になってしまうことがあります。これをそのまま書きだしたらアセットのまわりがぼやけてしまう原因となります。Flex用のグラフィックアセットはスクリーン上で最適に見える必要があるため、目視でズレが生じている箇所を発見したら上図のように画像を選択後、コンテキストメニューから「ピクセルにスナップ」を実行して座標を整数値にするように心がけましょう。（グラフィックの形によっては敢えて「ピクセルにスナップ」させないほうが良いものがあるのでケースバイケースで）

●最適化設定を忘れずに

必要に応じてPng, Jpeg等の設定を適切に行なうようにしましょう。筆者の場合は大体「png 32」に設定しています。

アセットを書きだしてみる

ひととおりの設定ができたらアセットをまとめて書き出します。
「ファイル」→「書き出し」を選択すると表示されるダイアログボックスで「書き出し」プルダウンで「レイヤーからファイルへ」を選択します。
「画像を切り抜き」にチェックを入れることで透過PNGの書き出しができます。

最後に「保存」ボタンを押したらグラフィックアセットがまとめて書き出されます。

次回は、これらのグラフィックアセットをシンボル化しひとつのswfファイルにまとめる方法について述べたいと思います。